<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/notes.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Kevin's Homepage</title>
<!-- InstanceEndEditable -->
<link href="../main.css" rel="Stylesheet">



<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>

<body>

<div id="container">

		<div id="imagehi"><img id="hi" src="../images/hi.gif" alt="picture hi" /></div>
	
  		<div id="rightcolumn">
		<div id="title">
			<h1 id="titletext">Kevin's Home</h1>
		</div>
		
		<ol id="navlinks">
			<li><a href="../index.html">Home</a></li>
			<li><a href="../aboutmyself.html">About Myself</a></li>
			<li><a href="../photoalbum/photoalbum.html">Photo Album</a></li>
			<li><a href="notes.html">Quick Notes</a></li>
			<li class="last"><a href="../links.html">Links</a></li>
		</ol>
		
	    
	<div id="leftbar">  
		<ol>
			<li><a href="c.html">C &amp; C++</a></li>
			<li><a href="java.html">Java</a></li>
			<li><a href="perl.html">Perl</a></li>
			<li><a href="centos.html">Centos</a></li>
			<li><a href="unix.html">Unix</a></li>
			<li><a href="css.html">CSS</a></li>
			<li><a href="php.html">PHP</a></li>
			<li><a href="sql.html">SQL</a></li>
			<li><a href="photoshop.html">Photoshop</a></li>
			<li><a href="windows.html">Windows</a></li>
			<li><a href="numbers.html">Numbers</a></li>
			<li><a href="misc.html">Misc</a></li>
		</ol>
	</div><!-- end of leftbar -->
	    <!-- InstanceBeginEditable name="EditRegion_submain" -->
	    <div id="main">
		<h3>CSS</h3>
		<h4>CSS footer </h4>
		<pre class="codeblock">&lt;html&gt;
&lt;body&gt;
	&lt;div id=&quot;nonFooter&quot;&gt;
	&lt;/div&gt;
	&lt;div id=&quot;footer&quot;&gt;
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

		<pre class="codeblock">You then need to apply a bit of CSS:
html
{
	height: 100%;
}

body
{
	height: 100%;
}

#nonFooter
{
	position: relative;
	min-height: 100%;
}

* html #nonFooter
{
	height: 100%;
}

#footer
{
	position: relative;
	margin-top: -7.5em;
}</pre>
        <h4>Element Positioning</h4>
        <p>Static positioning:  Static positioning is the normal positioning model, elements
          are rendered inline or within their respective blocks.</p>
        <p>Relative positioning: Relative positioning is used to move an element  from its normal position, where it
          would normally be rendered to a new position. The new position is relative to the
          normal position of the element.</p>
        <p>Absolute positioning: Elements  are positioned relative to the view port instead
          of their normal position in the document.</p>
        <p>Fixed positioning: it is similar to relative positioning in that the element is positioned 
          relative to the view port. However, fixed positioning causes the element to be fixed in
          the view port, it will not scroll when the document is scrolled; it maintains its
          position.</p>
        <p>Floating Elements to the Left or Right: The other way to position elements is to float them outside of the normal flow of 
          elements. When elements are floated, they remove themselves from their normal 
          position and float to the specified margin. If the element is floated to a margin, the other elements will wrap around
          the opposite side of the element.</p>
        </div>
    <!-- InstanceEndEditable --></div><!-- end of rightcolumn div -->
</div><!-- end of container div -->

<div id="footer">
	<p>Website design by <a href="../index.html">Kevin Mu Qing</a>; Hosting by <a href="http://www.jimlei.com" target="_blank">Jim Xianyu Lei</a></p>
</div>

</body>
<!-- InstanceEnd --></html>
